<template>
    <div id="log-operator">
        <el-table
                :data="tableData.rows"
                style="width: 100%"
                :stripe="true"
                :border="true"
                size="mini"
                :fit="true"
                :highlight-current-row="true"
                max-height="550">

            <el-table-column
                    prop="id"
                    sortable
                    :show-overflow-tooltip="false"
                    label="编号">
            </el-table-column>

            <el-table-column
                    prop="application"
                    :highlight-current-row="true"
                    sortable
                    :show-overflow-tooltip="false"
                    label="服务名称">
            </el-table-column>

            <el-table-column
                    prop="path"
                    sortable
                    :show-overflow-tooltip="true"
                    label="请求路径">
            </el-table-column>

            <el-table-column
                    :show-overflow-tooltip="false"
                    sortable
                    min-width="150px"
                    prop="title"
                    label="接口名称">
            </el-table-column>

            <el-table-column
                    sortable
                    prop="operatorName"
                    min-width="100px"
                    label="操作人用户名">
            </el-table-column>

            <el-table-column
                    sortable
                    prop="requestType"
                    label="请求类型">
            </el-table-column>


            <el-table-column
                    sortable
                    prop="info"
                    label="返回提示">
            </el-table-column>

            <el-table-column
                    prop="code"
                    label="状态码">
            </el-table-column>

            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="argument"
                    sortable
                    label="请求参数">
            </el-table-column>

            <el-table-column
                    prop="timeConsume"
                    sortable
                    label="时耗">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    min-width="100px"
                    prop="stackTrace"
                    sortable
                    label="错误追踪链">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="showDetail(scope.row)" type="text" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, prev, pager, next,sizes"
                :page-size="page.size"
                :current-page="page.current"
                @current-change="handlerCurrent"
                @size-change="handlePageSize"
                :total="tableData.total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "log-operator",
        data() {
            return {
                page: {
                    size: 30,
                    current: 1
                },
                tableData: {
                    total: null,
                    size: 30,
                    current: 1,
                    rows: [{

                    }]
                }
            }
        },
        methods: {
            async requestData() {
                const resp = await this.$http.post("/log-operator/page", this.page);
                let data = resp.data;
                if (data.code === 200) {
                    this.tableData = data;
                } else {
                    this.$message.error(data.info);
                }
            },
            handlerCurrent(current) {
                this.page.current = current;
                this.requestData();
            },
            handlePageSize(size) {
                this.page.size = size;
                this.requestData();
            },
            showDetail(row) {
                this.$message.success("详情");
            }
        },
        created() {
            this.requestData();
        }
    }
</script>

<style scoped>

</style>